<script setup>
import {useRouter} from 'vue-router'

const router = useRouter()

defineOptions({
  name: 'PagePanel'
})
defineProps({
      // 页面标题
      title: {
        type: String,
        default: ''
      }
    }
)
const back = () => {
  router.go(-1)
}

</script>

<template>
  <div class="page-panel">
    <div class="page-panel-inner">
      <div style="padding: 16px 24px 0 24px;">
        <h4 style="display: inline-block;user-select: none;cursor: pointer;" @click="back"><i class="h-icon-left"/> 返回
        </h4>
        <Divider direction="vertical"/>
        <span><slot name="title">{{title}}</slot></span>
      </div>
      <Divider style="margin: 10px 0 0 0"/>
      <slot/>
    </div>
  </div>
</template>
<style>
.page-panel{
  height: 100%;width: 100%;padding: 16px 24px;background-color: #F7F8FA;
}
.page-panel .page-panel-inner{
  background-color: white;height:100%;border-radius: 8px;display: flex;flex-direction: column;
}
.page-panel-inner>.data-table>.data-table-inner{
  border-radius: 0 0 5px 5px;
}
</style>
